<template>
	<view class="create_room_page">
		<navgatsmyVue :images="img"></navgatsmyVue>
		<view class="main">
			<!-- 遮罩层 -->
			<view class="mask" v-if="isCheckBoxActive" @click="closeCheckBox"></view>
			<view class="main_box">
				<view class="check_box" v-if="selectedBoxObjects.length > 0" :class="{
					active_check_box: isCheckBoxActive,
					show: selectedBoxObjects.length > 0
				}" @click="openCheckBox">
					<view class="title">
						<view class="left">
							已选({{ selectedBoxObjects.length }}&nbsp;/&nbsp;{{ boxData.length }})个
						</view>
						<view class="right" @click.stop="clearSelectedBoxes">
							<u-icon name="trash" color="white" size="18"></u-icon>
							<view class="text">
								清空
							</view>
						</view>
					</view>
					<view class="active_box_list" v-if="isCheckBoxActive">
						<view class="active_box_list_scroll">
							<view class="item" v-for="(item, index) in selectedBoxObjects" :key="index">
								<view class="left">
									<view class="imagebox">
										<view class="img" :style="{ backgroundImage: 'url(' + item.intact_cover + ')' }">

										</view>
									</view>
									<view class="msgbox">
										<view class="name">
											{{ item.name }}
										</view>
										<view class="pricebox">
											<view class="icon">

											</view>
											<view class="text">
												{{ item.game_bean }}
											</view>
										</view>
									</view>
								</view>
								<view class="right">
									<view class="sub" @click.stop="decreaseQuantity(item)">
										<u-icon name="minus" color="#7869DA" size="8"></u-icon>
									</view>
									<view class="num">
										{{ getBoxQuantity(item.id) }}
									</view>
									<view class="add" @click.stop="increaseQuantity(item)">
										<u-icon name="plus" color="white" size="8"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tab_box">
					<view class="tab_item" :class="{ active: currentTab === index }" v-for="(item, index) in tabList"
						:key="index" @click="selectTab(index)">
						{{ item.title }}
					</view>
				</view>
				<view class="change_box" :class="{ 'has-selected': selectedBoxObjects.length > 0 }">
					<view class="title">
						<view class="left">
							选择箱子
						</view>
						<view class="checkNum">
							{{ selectedBoxObjects.length }}&nbsp;/&nbsp;{{ boxData.length }}
						</view>
					</view>
					<view class="box_list">
						<view class="scroll_list">
							<view class="box_list_item" :class="{ active: isBoxSelected(index) }"
								v-for="(item, index) in boxData" :key="index" @click="toggleBoxSelection(item, index)">
								<view class="imgbox" :class="{ active_imgbox: isBoxSelected(index) }">
									<view class="img" :style="{ backgroundImage: 'url(' + item.intact_cover + ')' }">

									</view>
								</view>
								<view class="msgbox" :class="{ active_msgbox: isBoxSelected(index) }">
									<view class="name">
										{{ item.name }}
									</view>
									<view class="price">
										<view class="icon">

										</view>
										{{ item.game_bean }}
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="bottom">
				<view class="money">
					<view class="icon">

					</view>
					<view class="text">
						{{ allPrice.toFixed(2) }}
					</view>
				</view>
				<view class="btn" @click="showFullScreenModal">

				</view>
			</view>
		</view>

		<!-- 全屏弹窗 -->
		<view class="fullscreen-modal" v-if="showModal" @click="closeFullScreenModal">
			<view class="modal-content" @click.stop>
				<view class="modal-box">
					<view class="title">
						<view class="left">
							对局设置
						</view>
						<view class="right" @click="closeFullScreenModal">
							<u-icon name="close-circle-fill" color="white" size="24"></u-icon>
						</view>
					</view>
					<view class="modal_main">
						<view class="add_num">
							<view class="modal_title">
								参与人数
							</view>
							<view class="options">
								<view class="item" :class="{ active: selectedJoinNum === item.num }"
									v-for="(item,index) in joinNum" :key="index" @click="selectJoinNum(item.num)">
									{{item.text}}
								</view>
							</view>
						</view>
						<view class="pk_mode">
							<view class="modal_title">
								对战模式
							</view>
							<view class="options">
								<view class="item" :class="{ active: selectedPkMode === item.id }"
									v-for="(item,index) in pkMode" :key="index" @click="selectPkMode(item.id)">
									{{item.text}}
								</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="cancel" @click="closeFullScreenModal">

						</view>
						<view class="create" @click="createBattle">

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPKarenaboxList,
		getPKarenaCreate
	} from "../../../api/pk/pk.js"
	import navgatsmyVue from '../../../Component/navgatsmy/navgatsmy.vue';
	import {
		playSound
	} from "../../../utils/soundSettings.js";
	export default {
		data() {
			return {
				img: "https://img.jingkakeji.com/img/static/pk/chuangpk.png",
				currentTab: 0, // 当前选中的标签索引
				isCheckBoxActive: false, // 控制check_box的激活状态，默认关闭
				selectedBoxIds: [], // 选中的箱子ID数组
				selectedBoxObjects: [], // 选中的整个箱子对象数组
				boxQuantities: {}, // 存储每种箱子的数量 {boxId: quantity}
				allPrice: 0,
				showModal: false, // 控制全屏弹窗显示
				selectedJoinNum: 2, // 选中的参与人数（使用人数数值）
				selectedPkMode: 1, // 选中的对战模式
				joinNum: [{
					id: 1,
					num: 2,
					text: '2人'
				}, {
					id: 2,
					num: 3,
					text: '3人'
				}, ],
				pkMode: [{
					id: 1,
					text: '欧皇模式'
				}, {
					id: 2,
					text: '非酋模式'
				}],
				tabList: [{
					id: 1,
					title: "以小博大"
				}, {
					id: 2,
					title: "一九专区"
				}, {
					id: 3,
					title: "二八专区"
				}, {
					id: 4,
					title: "三七专区"
				}],
				//箱子数据
				boxData: []
			}
		},
		components: {
			navgatsmyVue
		},
		mounted() {
			this.getData()
		},
		methods: {
			async getData() {
				let res = await getPKarenaboxList()
				if (res.code == 200) {
					this.boxData = res.data
					// console.log(this.boxData[0]);
				}
			},
			// 选择标签页
			selectTab(index) {
				this.currentTab = index;
			},
			// 打开check_box
			openCheckBox() {
				this.isCheckBoxActive = true;
			},
			// 关闭check_box
			closeCheckBox() {
				this.isCheckBoxActive = false;
			},
			// 清空选中的箱子
			clearSelectedBoxes() {
				this.selectedBoxIds = [];
				this.selectedBoxObjects = [];
				this.boxQuantities = {};
				this.allPrice = 0;
				this.isCheckBoxActive = false
			},
			// 判断箱子是否被选中
			isBoxSelected(index) {
				const item = this.boxData[index];
				return this.selectedBoxIds.includes(item.id);
			},
			// 获取箱子数量
			getBoxQuantity(boxId) {
				return this.boxQuantities[boxId] || 0;
			},
			// 增加箱子数量
			increaseQuantity(item) {
				// 检查总数是否已达到6个
				if (this.selectedBoxIds.length >= 6) {
					uni.showToast({
						title: '最多只能选择6个箱子',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				const currentQuantity = this.boxQuantities[item.id] || 0;
				this.boxQuantities[item.id] = currentQuantity + 1;

				// 每次增加数量时，追加一个对应id
				this.selectedBoxIds.push(item.id);

				// 如果数量从0变为1，需要添加到选中对象列表
				if (currentQuantity === 0) {
					this.selectedBoxObjects.push(item);
				}

				// 更新总价格
				this.allPrice += Number(item.game_bean);
				console.log('箱子数量:', this.selectedBoxIds);
			},
			// 减少箱子数量
			decreaseQuantity(item) {
				const currentQuantity = this.boxQuantities[item.id] || 0;

				if (currentQuantity > 0) {
					this.boxQuantities[item.id] = currentQuantity - 1;

					// 从selectedBoxIds中移除一个对应id（仅移除一个实例）
					const idx = this.selectedBoxIds.indexOf(item.id);
					if (idx !== -1) {
						this.selectedBoxIds.splice(idx, 1);
					}

					// 更新总价格
					this.allPrice -= Number(item.game_bean);

					// 如果数量变为0，从选中对象列表中移除该对象
					if (this.boxQuantities[item.id] === 0) {
						delete this.boxQuantities[item.id];
						this.selectedBoxObjects = this.selectedBoxObjects.filter(box => box.id !== item.id);
					}

					// 修复浮点数精度问题
					this.allPrice = Math.abs(this.allPrice) < 0.01 ? 0 : this.allPrice;
					console.log('箱子数量:', this.selectedBoxIds);
				}
			},
			// 切换箱子选择状态
			toggleBoxSelection(item, index) {
				if (this.selectedBoxIds.includes(item.id)) {
					// 如果已选中，则取消选择
					this.selectedBoxIds = this.selectedBoxIds.filter(id => id !== item.id);
					this.selectedBoxObjects = this.selectedBoxObjects.filter(box => box.id !== item.id);
					// 减去价格
					this.allPrice -= Number(item.game_bean);
					// 减少数量
					if (this.boxQuantities[item.id]) {
						this.boxQuantities[item.id]--;
						if (this.boxQuantities[item.id] <= 0) {
							delete this.boxQuantities[item.id];
						}
					}
				} else {
					// 检查总数是否已达到6个
					if (this.selectedBoxIds.length >= 6) {
						uni.showToast({
							title: '最多只能选择6个箱子',
							icon: 'none',
							duration: 2000
						});
						return;
					}

					// 如果未选中，则添加到选中列表
					this.selectedBoxIds.push(item.id);
					this.selectedBoxObjects.push(item);
					// 加上价格
					this.allPrice += Number(item.game_bean);
					// 增加数量
					this.boxQuantities[item.id] = (this.boxQuantities[item.id] || 0) + 1;
				}
				// 修复浮点数精度问题，避免出现-0.00
				this.allPrice = Math.abs(this.allPrice) < 0.01 ? 0 : this.allPrice;
				console.log('选中的箱子ID:', this.selectedBoxIds);
			},
			// 显示全屏弹窗
			showFullScreenModal() {
				playSound("https://img.jingkakeji.com/img/static/music/click.mp3")
				if (this.selectedBoxObjects.length === 0) {
					uni.showToast({
						title: '请先选择箱子',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.showModal = true;
			},
			// 关闭全屏弹窗
			closeFullScreenModal() {
				this.showModal = false;
				playSound("https://img.jingkakeji.com/img/static/music/click.mp3")
			},
			// 选择参与人数
			selectJoinNum(id) {
				this.selectedJoinNum = id;
			},
			// 选择对战模式
			selectPkMode(id) {
				this.selectedPkMode = id;
			},
			// 创建对战
			async createBattle() {
				playSound("https://img.jingkakeji.com/img/static/music/click.mp3")
				let data = {
					box: this.selectedBoxIds,
					user_num: this.selectedJoinNum,
					game_mode: this.selectedPkMode,
				};
				console.log(data);
				let res = await getPKarenaCreate(data)
				console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: "创建成功",
						icon: "none",
						duration: 1500
					})
					this.clearSelectedBoxes()
					this.showModal = false
				} else {
					uni.showToast({
						title: "创建失败",
						icon: "none",
						duration: 1500
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.create_room_page {
		width: 100vw;
		height: 100vh;

		.main {
			width: 100%;
			height: calc(100% - 170rpx);
			background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/bg.png");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			overflow: hidden;
			position: relative;

			.mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 8;
			}

			.main_box {
				width: 100%;
				height: calc(100% - 160rpx);
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 20rpx;
				position: relative;

				.check_box {
					width: 100%;
					height: 150rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 9;
					background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/check_box.png");
					background-size: 100% 100%;
					background-position: center;
					background-repeat: no-repeat;
					transition: all 0.3s ease-in-out;
					display: flex;
					flex-direction: column;
					align-items: center;
					transform: translateY(100%);
					opacity: 0;

					.title {
						width: 95%;
						height: 100rpx;
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							font-size: 24rpx;
							color: white;
						}

						.right {
							display: flex;
							align-items: center;


							.text {
								color: white;
								font-size: 24rpx;
								margin-left: 10rpx;
							}
						}
					}

					.active_box_list {
						width: 90%;
						height: 580rpx;
						overflow-y: scroll;

						.active_box_list_scroll {
							width: 100%;
							display: flex;
							flex-direction: column;

							.item {
								width: 100%;
								height: 160rpx;
								background-color: #D7D2F9;
								margin-bottom: 20rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.left {
									width: 300rpx;
									height: 150rpx;
									display: flex;
									justify-content: space-evenly;
									align-items: center;

									.imagebox {
										width: 130rpx;
										height: 130rpx;
										background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/active_list_imgbox.png");
										background-size: contain;
										background-position: center;
										background-repeat: no-repeat;

										.img {
											width: 100%;
											height: 100%;
											background-size: contain;
											background-position: center;
											background-repeat: no-repeat;
										}
									}

									.msgbox {
										width: 140rpx;
										height: 90rpx;
										display: flex;
										flex-direction: column;
										justify-content: space-between;

										.name {
											width: 140rpx;
											white-space: nowrap;
											overflow: hidden;
											text-overflow: ellipsis;
											color: #31296A;
											font-size: 30rpx;
										}

										.pricebox {
											display: flex;
											align-items: center;

											.icon {
												width: 20rpx;
												height: 20rpx;
												background-image: url("https://img.jingkakeji.com/img/static/new_pk/money.png");
												background-size: contain;
												background-position: center;
												background-repeat: no-repeat;
												margin-right: 10rpx;
											}

											.text {
												color: #7869DA;
												font-size: 24rpx;
											}
										}
									}
								}

								.right {
									width: 200rpx;
									height: 100rpx;
									display: flex;
									align-items: center;
									justify-content: space-evenly;

									.sub {
										width: 30rpx;
										height: 30rpx;
										border: 1px solid #7869DA;
										border-radius: 50%;
										display: flex;
										align-items: center;
										justify-content: center;
									}

									.num {
										font-size: 26rpx;
									}

									.add {
										width: 30rpx;
										height: 30rpx;
										background-color: #7869DA;
										border-radius: 50%;
										display: flex;
										align-items: center;
										justify-content: center;
									}
								}
							}
						}

					}
				}

				.active_check_box {
					height: 700rpx;
					background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/active_check_box.png");
					transition: all 0.3s ease-in-out;
				}

				// 当有选中箱子时显示动画
				.check_box.show {
					transform: translateY(0);
					opacity: 1;
				}

				.tab_box {
					width: 95%;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.tab_item {
						width: 155rpx;
						height: 60rpx;
						background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/no_active.png");
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
						text-align: center;
						line-height: 60rpx;
						font-size: 26rpx;
						color: white;
					}

					.active {
						background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/active.png");
					}
				}

				.change_box {
					width: 95%;
					height: 1170rpx;
					background-color: rgba(255, 255, 255, 0.2);
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 20rpx;
					transition: height 0.3s ease-in-out;

					&.has-selected {
						height: 1050rpx;
					}


					.title {
						width: 100%;
						height: 80rpx;
						background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/title.png");
						background-size: 100% 100%;
						background-position: center;
						background-repeat: no-repeat;
						font-size: 30rpx;
						color: white;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							margin-left: 30rpx;
							font-weight: bold;
						}

						.checkNum {
							margin-right: 30rpx;
							padding: 0rpx 30rpx;
							border: 1px solid #ccc;
							border-radius: 10rpx;
						}
					}

					.box_list {
						width: 100%;
						height: 100%;
						margin-top: 20rpx;
						overflow-y: scroll;

						.scroll_list {
							width: 100%;
							display: flex;
							flex-wrap: wrap;

							.box_list_item {
								width: 200rpx;
								height: 265rpx;
								margin-bottom: 30rpx;
								margin-left: 30rpx;

								.imgbox {
									width: 100%;
									height: 175rpx;
									background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/imgbox.png");
									background-size: contain;
									background-position: center;
									background-repeat: no-repeat;
									display: flex;
									align-items: center;
									justify-content: center;

									.img {
										width: 228rpx;
										height: 228rpx;
										background-size: contain;
										background-position: center;
										background-repeat: no-repeat;
									}
								}

								.active_imgbox {
									background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/active_imgbox.png");
								}

								.msgbox {
									width: 100%;
									height: 80rpx;
									background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/msgbox.png");
									background-size: 100% 100%;
									background-position: center;
									background-repeat: no-repeat;
									display: flex;
									flex-direction: column;
									align-items: center;

									.name {
										text-align: center;
										color: white;
										font-size: 26rpx;
									}

									.price {
										display: flex;
										align-items: center;
										font-size: 24rpx;
										color: #FBDC3B;

										.icon {
											width: 20rpx;
											height: 20rpx;
											background-image: url("https://img.jingkakeji.com/img/static/new_pk/money.png");
											background-size: contain;
											background-position: center;
											background-repeat: no-repeat;
											margin-right: 10rpx;
										}
									}
								}

								.active_msgbox {
									background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/active_msgbox.png");
								}
							}
						}
					}
				}

			}

			.bottom {
				width: 100%;
				height: 160rpx;
				background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/btm.png");
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				overflow-y: scroll;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.money {
					display: flex;
					align-items: center;
					margin-left: 30rpx;

					.icon {
						width: 40rpx;
						height: 40rpx;
						background-image: url("https://img.jingkakeji.com/img/static/new_pk/money.png");
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
						margin-right: 10rpx;
					}

					.text {
						color: #FBDC3B;
						margin-left: 10rpx;
						font-size: 32rpx;
					}
				}

				.btn {
					width: 340rpx;
					height: 130rpx;
					background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/create_btn.png");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}
			}
		}

		// 全屏弹窗样式
		.fullscreen-modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 9999;
			display: flex;
			align-items: center;
			justify-content: center;

			.modal-content {
				width: 600rpx;
				height: 700rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.modal-box {
					width: 100%;
					height: 100%;
					background-color: #C1BEF9;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.title {
						width: 100%;
						height: 100rpx;
						background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/title.png");
						background-size: 100% 100%;
						background-position: center;
						background-repeat: no-repeat;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							margin-left: 20rpx;
							font-size: 34rpx;
							color: white;
							font-weight: bold;
						}

						.right {
							margin-right: 20rpx;
						}
					}

					.modal_main {
						width: 90%;
						height: 300rpx;

						.add_num,
						.pk_mode {
							width: 100%;
							height: 150rpx;
							border-bottom: 1px solid white;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.modal_title {
								font-size: 30rpx;
								color: #31296A;
							}

							.options {
								display: flex;
								font-size: 28rpx;

								.item {
									padding: 10rpx 20rpx;
									background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/option.png");
									background-size: 100% 100%;
									background-position: center;
									background-repeat: no-repeat;
									margin-left: 20rpx;
									color: #7868DB;
								}

								.active {
									background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/active_option.png");
									color: white;
								}
							}
						}
					}

					.bottom {
						width: 100%;
						height: 200rpx;
						display: flex;
						justify-content: space-between;

						.cancel {
							width: 260rpx;
							height: 210rpx;
							background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/cancel.png");
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
							margin-left: 10rpx;
							margin-top: 5rpx;
						}

						.create {
							width: 300rpx;
							height: 210rpx;
							background-image: url("https://img.jingkakeji.com/img/static/new_createRoom/create_btn.png");
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
						}
					}
				}
			}
		}
	}
</style>